import Vue from 'vue'
import Component from 'vue-class-component'
import './topicStyle.css'

@Component
export default class addTopicProduct extends Vue {

  topicProducts = []
  price = []

  created() {
    this.topicProducts = this.$store.getters.topicProductArr
    this.wrapperHeight = document.documentElement.clientHeight - 64
  }

  mounted() {
      // console.log(this.topicProduct)
    // for (let i = 1; i <= 10; i++) {
    //   this.list.push(i)
    // }
  }

  get caculateHeight() {
    return 'height:' + this.wrapperHeight + 'px'
  }


  createItems() {
      console.log('22222222')
    console.log(this.topicProducts)
    if (!this.topicProducts || this.topicProducts.length <= 0) {
        return
    }
    const item = this.topicProducts.map((value, index) => {
      return <dl>
        <span onClick={() => this.handerDelProduct(index)}><icon name="deleteIcon" scale="2"/></span>
        <dt><img src={value.productCover + '?x-oss-process=image/resize,m_pad,h_400,w_400,color_ffffff/quality,Q_80/format,jpg'}/></dt>
        <dd>
          <p class="ellipsis" v-show={value.designerName}>{value.designerName}</p>
          <p class="ellipsis" v-show={value.productName}>{value.productName}</p>
          <p v-show={value.showPrice}>{value.currencyLogo}{value.showPrice}</p>
          <p class="ellipsis" v-show={value.title}>{value.title}</p>
          <p class="ellipsis" v-show={value.subTitle}>{value.subTitle}</p>
          <p v-show={value.thirdTitle}>{value.thirdTitle}</p>
      </dd>
      </dl>
    })
    return item
  }

  handerDelProduct(index) {
    this.topicProducts.splice(index, 1)
  }

  handerProduct() {
    this.$store.commit('setTopicProductArr', this.topicProducts)
    this.$router.go(-1)
  }

  handerProductCopy() {
    this.$router.push({name: 'topicProductCopy'})
  }

  render() {
    return (
      <div class="content">
        <mt-header class="header" fixed title="编辑专题商品">
          <mt-button icon="back" slot="left" onClick={this.handerProduct}></mt-button>
          <mt-button icon="" slot="right" onClick={this.handerProductCopy}>
            <icon name='addIcon' scale='2'/>
          </mt-button>
        </mt-header>

        <div class="pageScroll"  style={this.caculateHeight + ';padding-top:0; margin-top:64px;'}>
          <div class="product-list">
            {this.createItems()}
          </div>
          <div class="addImgTip" v-show={!this.topicProducts || this.topicProducts.length <= 0}>
            <icon name='addImageIcon' scale='4'/><br/>
            <p>请选择商品</p>
          </div>
        </div>
      </div>
    )
  }
}
